<template>
  <view class="activity-item" @click="toDetails">
    <view class="activity-content">
      <view class="avtivity-img">
        <TImage
          :src="item.coverUrl"
          width="240rpx"
          height="180rpx"
          border-radius="16rpx"
          error-img-type="person"
        />
        <view class="status-tag-box">
          <view
            v-if="statusText"
            class="status-tag"
            :style="{
              background: statusText.backgroundColor,
              color: statusText.color,
            }"
          >
            {{ statusText.text }}
          </view>
        </view>
      </view>
      <view class="activity-info">
        <text class="activity-title text-overflow-2">{{ item.title }}</text>
        <view class="icon-str">
          <text class="ali-icon icon-zhuangtai icon-size"></text>
          <text>{{ myActivityStatusEnumText }}</text>
        </view>
        <view class="icon-str">
          <text class="ali-icon icon-shijian icon-size"></text>
          <text>{{ formatToDateTime(item.startTime, 'MM月DD日 HH:mm') }}</text>
        </view>

        <view v-if="item.addressName" class="icon-str">
          <text class="ali-icon icon-weizhi icon-size"></text>
          <text>{{ item.addressName }}</text>
        </view>
      </view>
    </view>
    <view class="activity-opration mt-8 pt-12 disFlxAC flexEnd" v-if="getShowCancelRegister">
      <TButton
        v-if="getShowCancelRegister"
        text="取消报名"
        type="none"
        :customStyle="{
          display: 'inline-block',
          backgroundColor: '#F2F3F5',
          color: '#333333',
          marginLeft: '24rpx',
        }"
        custom-class="h-24 linh-24 br-12"
        @click.stop="modalVisible = true"
      />
      <!-- <TButton
        v-if="item.attendanceCardUrl"
        text="参会证"
        type="none"
        :customStyle="{
          display: 'inline-block',
          backgroundColor: '#F2F3F5',
          color: '#333333',
          marginLeft: '24rpx',
        }"
        custom-class="h-24 linh-24 br-12"
        @click.stop="handleCertificate"
      /> -->
    </view>
  </view>

  <ShowModal
    v-model="modalVisible"
    title="取消报名"
    content-width="100%"
    cancel-text="暂不取消"
    confirm-text="申请取消"
    confirm-color="#EA5E0E"
    :confirm-auto-close="false"
    @confirm="handleCancelRegister"
  >
    <template #content>
      <view class="pa-20" style="width: 100%">
        <view class="fz-14 mb-16" style="color: #969799">
          <text>活动主办方审核同意取消后，如有支付的活动费用将原路退回。</text>
        </view>
        <view style="background-color: #f2f3f5">
          <UniEasyinput v-model="cancelRemark" type="textarea" placeholder="请说明取消报名原因" />
        </view>
      </view>
    </template>
  </ShowModal>
</template>

<script setup lang="ts">
  import { computed, ref, type PropType } from 'vue';
  import type { IActivityListResData } from '@/api/activity/types';
  import TImage from '@/components/TImage/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import {
    ActivityStatusEnum,
    ApprovalStatusEnum,
    SignStatusEnum,
  } from '@/enums/activityStatusEnum';
  import { navigateTo } from '@/router';
  import { cancelActivityRegister } from '@/api/activity';
  import { Toast } from '@/utils';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';

  const props = defineProps({
    item: {
      type: Object as PropType<IActivityListResData>,
      required: true,
    },
  });
  const emits = defineEmits(['refresh']);

  /**去查看参会证 */
  const handleCertificate = () => {
    const { item } = props;
    if (item) {
      navigateTo({
        name: 'attendanceCard',
        options: {
          activityId: item.id,
          equipmentNumber: '',
          url: undefined,
          activityRegisterId: item.register?.id,
          isActivityArrange: false,
          attendanceCardUrl: item.attendanceCardUrl,
        },
      });
    }
  };

  const modalVisible = ref(false);
  const cancelRemark = ref<string>('');
  /** 取消报名 */
  function handleCancelRegister() {
    if (!cancelRemark.value) return Toast('请说明取消报名原因');
    cancelActivityRegister({
      registerId: props.item.register?.id as number,
      remarks: cancelRemark.value,
    })
      .then(() => {
        emits('refresh');
        Toast('申请已提交');
      })
      .finally(() => (modalVisible.value = false));
  }

  function toDetails() {
    const { register } = props.item;
    if (register) {
      navigateTo({
        name: 'activityRegisterDetail',
        options: {
          registerId: register.id,
          callback: () => emits('refresh'),
        },
      });
    }
  }

  const getShowCancelRegister = computed(() => {
    return (
      (props.item.register?.approvalStatus === ApprovalStatusEnum.PASSED ||
        props.item.register?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW ||
        props.item.register?.approvalStatus === ApprovalStatusEnum.WAITPARTICIPATEIN) &&
      props.item.activityStatus !== ActivityStatusEnum.END &&
      props.item.activityStatus !== ActivityStatusEnum.CANCEL &&
      props.item.register?.signStatus !== SignStatusEnum.YES_SIGN
    );
  });

  const statusText = computed(() => {
    return approvalStatusEnumText.value;
  });

  /**活动结束 */
  const activityFinish = computed(() => {
    return [
      ActivityStatusEnum.END,
      ActivityStatusEnum.CANCEL,
      ActivityStatusEnum.UNDERREVIEW,
      ActivityStatusEnum.AUDITFAILURE,
    ].includes(props.item.activityStatus);
  });

  /**我的活动--报名状态 */
  const approvalStatusEnumText = computed(() => {
    if (activityFinish.value) {
      return {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '已结束',
      };
    }

    if (props.item.register?.signStatus === SignStatusEnum.YES_SIGN) {
      return {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '已签到',
      };
    }

    if (!props.item.register?.approvalStatus) return;
    return {
      [ApprovalStatusEnum.UNDERREVIEW]: {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '审核中',
      },
      [ApprovalStatusEnum.REJECT]: {
        backgroundColor: '#EA5E0E',
        color: '#FFFFFF',
        text: '被驳回',
      },
      [ApprovalStatusEnum.PASSED]: {},
      [ApprovalStatusEnum.CANCELING]: {
        backgroundColor: '#EA5E0E',
        color: '#FFFFFF',
        text: '退款中',
      },

      [ApprovalStatusEnum.NOTPASS]: {
        backgroundColor: '#2878FF',
        color: '#FFFFFF',
        text: '未通过',
      },
      [ApprovalStatusEnum.WAITPARTICIPATEIN]: {
        backgroundColor: '#2878FF',
        color: '#FFFFFF',
        text: '待参加',
      },
      [ApprovalStatusEnum.CANCEL]: {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '取消报名',
      },
    }[props.item.register?.approvalStatus];
  });

  /**我的活动-活动状态 */
  const myActivityStatusEnumText = computed(() => {
    return {
      [ActivityStatusEnum.REGISTRATION_UNPLAYED]: '活动发布',
      [ActivityStatusEnum.REGISTRATION_UNDERWAY]: '报名进行中',
      [ActivityStatusEnum.REGISTRATION_END]: '报名结束',
      [ActivityStatusEnum.START]: '活动进行中',
      [ActivityStatusEnum.END]: '活动结束',
      [ActivityStatusEnum.CANCEL]: '活动取消',
      [ActivityStatusEnum.UNDERREVIEW]: '活动审核中',
      [ActivityStatusEnum.AUDITFAILURE]: '活动审核失败',
      [ActivityStatusEnum.REGISTRATION_NOTSTARTED]: '活动报名未开始',
    }[props.item.activityStatus];
  });
</script>

<style lang="scss" scoped>
  .activity-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx;

    .activity-content {
      display: flex;

      gap: 24rpx;
      .avtivity-img {
        width: 240rpx;
        flex-shrink: 0;
        position: relative;
        .status-tag-box {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          gap: 16rpx;
          .status-tag {
            padding: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx 0 8rpx 8rpx;
            box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
            font-size: 28rpx;
            letter-spacing: 2rpx;
          }
          .status-hide {
            width: 88rpx;
            height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px 0px 8rpx 8rpx;
            background: rgba(0, 0, 0, 0.7);
            box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
            color: #fff;
            font-size: 28rpx;
            line-height: 40rpx;
            letter-spacing: 2rpx;
          }
        }
      }

      .activity-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16rpx;
        .activity-title {
          font-size: 28rpx;
        }

        .icon-str {
          display: flex;
          gap: 16rpx;
          color: #ccccc8;
          font-size: 28rpx;
          line-height: 32rpx;
          .icon-size {
            font-size: 32rpx;
          }
        }
        .activity-statistics {
          display: inline-block;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          background-color: #f2f3f5;
          color: #999996;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }

    .activity-opration {
      box-shadow: 0px 1px 0px 0px #ebedf0 inset;
    }
  }
</style>
